<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=graph-label-overlap
-->
<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 600px; width: 1000px; border: 1px solid #dedede"></div>
    <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"
    ></script>
    <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/extension/dataTool.min.js"></script>
        -->
    <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
    <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
    <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/map/js/world.js"></script>
        -->
    <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/extension/bmap.min.js"></script>
        -->

    <script type="text/javascript">
      var ROOT_PATH = "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";

      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var app = {};

      var option;

      const graph = {
        categories: [
          {
            name: "根目录",
          },
          {
            name: "lib根目录",
          },
          {
            name: "lib/adapters",
          },
          {
            name: "lib/cancel",
          },
          {
            name: "lib/core",
          },
          {
            name: "lib/helpers",
          },
        ],
        nodes: [
          // 根目录
          {
            name: "index.js",
            value: 1,
            category: 0,
          },
          // lib根目录
          {
            name: "axios.js",
            value: 1,
            category: 1,
          },
          {
            name: "defaults.js",
            value: 1,
            category: 1,
          },
          {
            name: "utils.js",
            value: 1,
            category: 1,
          },
          // adapters
          {
            name: "http.js",
            value: 1,
            category: 2,
          },
          {
            name: "xhr.js",
            value: 1,
            category: 2,
          },
          // cancel
          {
            name: "Cancel.js",
            value: 1,
            category: 3,
          },
          {
            name: "CancelToken.js",
            value: 1,
            category: 3,
          },
          {
            name: "isCancel.js",
            value: 1,
            category: 3,
          },
          // core
          {
            name: "Axios.js",
            value: 1,
            category: 4,
          },
          {
            name: "buildFullPath.js",
            value: 1,
            category: 4,
          },
          {
            name: "createError.js",
            value: 1,
            category: 4,
          },
          {
            name: "dispatchRequest.js",
            value: 1,
            category: 4,
          },
          {
            name: "enhanceError.js",
            value: 1,
            category: 4,
          },
          {
            name: "InterceptorManager.js",
            value: 1,
            category: 4,
          },
          {
            name: "mergeConfig.js",
            value: 1,
            category: 4,
          },
          {
            name: "settle.js",
            value: 1,
            category: 4,
          },
          {
            name: "transformData.js",
            value: 1,
            category: 4,
          },
          // helper
          {
            name: "bind.js",
            value: 1,
            category: 5,
          },
          {
            name: "buildURL.js",
            value: 1,
            category: 5,
          },
          {
            name: "combineURLs.js",
            value: 1,
            category: 5,
          },
          {
            name: "cookies.js",
            value: 1,
            category: 5,
          },
          {
            name: "deprecatedMethod.js",
            value: 1,
            category: 5,
          },
          {
            name: "isAbsoluteURL.js",
            value: 1,
            category: 5,
          },
          {
            name: "isAxiosError.js",
            value: 1,
            category: 5,
          },
          {
            name: "isURLSameOrigin.js",
            value: 1,
            category: 5,
          },
          {
            name: "normalizeHeaderName.js",
            value: 1,
            category: 5,
          },
          {
            name: "parseHeaders.js",
            value: 1,
            category: 5,
          },
          {
            name: "spread.js",
            value: 1,
            category: 5,
          },
          {
            name: "validator.js",
            value: 1,
            category: 5,
          },
        ],
        links: [
          // http.js文件的引入
          {
            source: "utils.js",
            target: "http.js",
          },
          {
            source: "settle.js",
            target: "http.js",
          },
          {
            source: "buildFullPath",
            target: "http.js",
          },
          {
            source: "buildURL.js",
            target: "http.js",
          },
          {
            source: "createError.js",
            target: "http.js",
          },
          {
            source: "enhanceError",
            target: "http.js",
          },
          // xhr.js
          {
            source: "utils.js",
            target: "xhr.js",
          },
          {
            source: "settle.js",
            target: "xhr.js",
          },
          {
            source: "cookies.js",
            target: "xhr.js",
          },
          {
            source: "buildURL.js",
            target: "xhr.js",
          },
          {
            source: "buildFullPath.js",
            target: "xhr.js",
          },
          {
            source: "parseHeaders.js",
            target: "xhr.js",
          },
          {
            source: "isURLSameOrigin.js",
            target: "xhr.js",
          },
          {
            source: "createError.js",
            target: "xhr.js",
          },
          // CancelToken.js
          {
            source: "Cancel.js",
            target: "CancelToken.js",
          },
          //  Axios.js
          {
            source: "utils.js",
            target: "Axios.js",
          },
          {
            source: "buildURL.js",
            target: "Axios.js",
          },
          {
            source: "InterceptorManager.js",
            target: "Axios.js",
          },
          {
            source: "dispatchRequest.js",
            target: "Axios.js",
          },
          {
            source: "mergeConfig.js",
            target: "Axios.js",
          },
          {
            source: "mergeConfig.js",
            target: "validator.js",
          },
          // buildFullPath.js
          {
            source: "isAbsoluteURL.js",
            target: "buildFullPath.js",
          },
          {
            source: "combineURLs.js",
            target: "buildFullPath.js",
          },
          // createError.js
          {
            source: "enhanceError.js",
            target: "createError.js",
          },
          // dispatchRequest.js
          {
            source: "utils.js",
            target: "dispatchRequest.js",
          },
          {
            source: "transformData.js",
            target: "dispatchRequest.js",
          },
          {
            source: "isCancel.js",
            target: "dispatchRequest.js",
          },
          {
            source: "defaults.js",
            target: "dispatchRequest.js",
          },
          // InterceptorManager.js
          {
            source: "utils.js",
            target: "InterceptorManager.js",
          },
          // mergeConfig.js
          {
            source: "utils.js",
            target: "mergeConfig.js",
          },
          // settle.js
          {
            source: "createError.js",
            target: "settle.js",
          },
          // transformData.js
          {
            source: "utils.js",
            target: "transformData.js",
          },
          {
            source: "defaults.js",
            target: "transformData.js",
          },
          // buildURL.js
          {
            source: "utils.js",
            target: "buildURL.js",
          },
          // cookies
          {
            source: "utils.js",
            target: "cookies.js",
          },
          {
            source: "utils.js",
            target: "isURLSameOrigin.js",
          },
          {
            source: "utils.js",
            target: "normalizeHeaderName.js",
          },
          {
            source: "utils.js",
            target: "parseHeaders.js",
          },
          {
            source: "http.js",
            target: "default.js",
          },
          {
            source: "xhr.js",
            target: "default.js",
          },
          // axios
          {
            source: "utils.js",
            target: "axios.js",
          },
          {
            source: "bind.js",
            target: "axios.js",
          },
          {
            source: "Axios.js",
            target: "axios.js",
          },
          {
            source: "mergeConfig.js",
            target: "axios.js",
          },
          {
            source: "defaults.js",
            target: "axios.js",
          },
          {
            source: "Cancel.js",
            target: "axios.js",
          },
          {
            source: "CancelToken.js",
            target: "axios.js",
          },
          {
            source: "isCancel.js",
            target: "axios.js",
          },
          {
            source: "spread.js",
            target: "axios.js",
          },
          {
            source: "isAxiosError.js",
            target: "axios.js",
          },
          // defaults.js
          {
            source: "utils.js",
            target: "defaults.js",
          },
          {
            source: "normalizeHeaderName.js",
            target: "defaults.js",
          },
          {
            source: "enhanceError.js",
            target: "defaults.js",
          },
          {
            source: "xhr.js",
            target: "defaults.js",
          },
          {
            source: "http.js",
            target: "defaults.js",
          },
          // utils
          {
            source: "bind.js",
            target: "utils.js",
          },
          // index.js
          {
            source: "axios.js",
            target: "index.js",
          },
        ],
      };
      myChart.showLoading();
      myChart.hideLoading();

      option = {
        tooltip: {},
        legend: [
          {
            data: graph.categories.map(function (a) {
              return a.name;
            }),
          },
        ],
        toolbox: {
          show: true,
        },
        series: [
          {
            name: "文件关系图",
            type: "graph",
            layout: "force",
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            animation: false,
            roam: true, // 平移和缩放
            draggable: true, // 是否可以拖拽
            label: {
              show: false,
              position: "right",
              formatter: "{b}",
              emphasis: {
                show: false, //是否显示标签
              },
            },
            labelLayout: {
              hideOverlap: true,
            },
            force: {
              repulsion: 80, //节点之间的斥力因子。120
              gravity: 0.01, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢  0.01
              edgeLength: 100, //边的两个节点之间的距离，这个距离也会受 repulsion。 100
            },
            symbol: "circle",
            symbolSize: 10, //关系图节点标记的大小
            edgeSymbolSize: [1, 6], //边两端的标记大小
            edgeSymbol: ["", "arrow"], //边两端的标记类型  arrow  circle
            edges: graph.links,
          },
        ],
      };

      myChart.setOption(option);
      // $.getJSON(ROOT_PATH + "/data/asset/data/les-miserables.json", function (graph) {

      // });

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
    </script>
  </body>
</html>
